<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>

    <title>筛选条件</title>

    <!--jquery-->
    <script src="//h5.bizsaas.net/a/dms-pc/0/lib/hplus/0.0.1/js/jquery.min.js"></script>

    <!--bootstrap-->
    <link href="//h5.bizsaas.net/a/dms-pc/0/lib/hplus/0.0.1/css/bootstrap.min14ed.css" rel="stylesheet">
    <script src="//h5.bizsaas.net/a/dms-pc/0/lib/hplus/0.0.1/js/bootstrap.min.js"></script>

    <!--bootstrapvalidator-->
    <link rel="stylesheet" href="//h5.bizsaas.net/a/dms-pc/0/lib/bootstrapvalidator/css/bootstrapValidator.min.css">
    <script src="//h5.bizsaas.net/a/dms-pc/0/lib/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
    <script src="//h5.bizsaas.net/a/dms-pc/0/lib/bootstrapvalidator/js/language/zh_CN.js"></script>

    <!--laydate-->
    <script src="//h5.bizsaas.net/a/dms-pc/0/lib/laydate/laydate.js"></script>

    <!--bootstrap-select-->
    <link rel="stylesheet" href="//h5.bizsaas.net/a/dms-pc/0/lib/bootstrap-select/css/bootstrap-select.min.css">
    <script src="//h5.bizsaas.net/a/dms-pc/0/lib/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="//h5.bizsaas.net/a/dms-pc/0/lib/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>

    <!--filter-box-->
    <link rel="stylesheet" href="filter-box/filter-box.css">
    <script src="filter-box/filter-box.js"></script>

    <script type="application/javascript">
        function initFilterBox() {
            var option = $("#option").val();
            if (option) {
                option = eval("(" + option + ")");
            }
            $("#myFilterBox").initFilterBox(option);
        }

        function getFilterData() {
            var data = $("#myFilterBox").getFilterData();
            var dataStr = JSON.stringify(data);
            $("#data").text(dataStr);
        }

        function restore() {
            var option = $("#option").val();
            if (option) {
                option = eval("(" + option + ")")
            } else {
                option = {};
            }
            var data = $("#data").text();
            if (data) {
                data = eval("(" + data + ")");
                option.data = data;
            }
            $("#myFilterBox").initFilterBox(option);
        }
    </script>

    <style type="text/css">
        .myDiv {
            margin-top: 50px;
            margin-left: 50px;
            float: left;
            border: 1px;
            border-style: solid;
            border-color: red;
        }
    </style>


</head>
<body>
<div class="myDiv" style="width: 500px">
    <pre>
//默认配置
var defaultOption = {
    fields: [{                          //筛选条件字段。初始化筛选框时应提供该参数用于填充筛选字段下拉列表。
        fieldCode: "code_02",           //字段编码
        fieldName: "整数类型选项",        //字段名称
        fieldType: "INT",       //字段类型
    }, {
        fieldCode: "code_01",
        fieldName: "文本类型选项",
        fieldType: "TEXT",
    }, {
        fieldCode: "code_03",
        fieldName: "浮点数类型选项",
        fieldType: "DOUBLE",
    }, {
        fieldCode: "code_04",
        fieldName: "主数据1",
        fieldType: "RADIO",
    }, {
        fieldCode: "code_05",
        fieldName: "主数据2",
        fieldType: "RADIOTREE",
    }],
    showHead: true,                     //是否显示检索名称
    showSerial: true,                   //不启用高级公式时是否显示条件序号
    maxOptions: 0,                      //最多添加条件数量，0表示无限制
    editable: true,                     //筛选框是否可编辑（筛选条件仅做展示时可设置为false）
    onConditionChange: undefined,       //筛选条件改变时回调函数
    /**
     * 异步加载主数据函数。
     * ["RADIO", "RADIOTREE", "MULTISELECTTREE", "MULTISELECT", "DROPDOWNBOX"]类型的字段可视为主数据，提供此函数后筛选条件的值由输入框变为下拉框。
     * 参数为筛选条件字段field，包含fieldCode、fieldName和fieldType三个字段。
     * 返回值应为一个数组，数组元素为json对象且包含valueCode和valueName两个字段。
     */
    onMasterData: undefined,
    data: {                             //复原筛选框时需要提供该参数。data是通过调用getFilterData方法获取到到json对象。
        filterName: '',                 //检索名称
        /**
         * 检索条件数组。其中元素为json对象包含以下字段：
         * serialNumber     //序号
         * fieldCode        //字段编码
         * fieldName        //字段名称
         * fieldType        //字段类型
         * operator         //运算符编码
         * operatorName     //运算符名称
         * value            //值
         * isMasterData     //该字段是否是主数据类型
         * valueCode        //主数据编码
         * valueName        //主数据值
         */
        conditions: [],
        isAdvanced: false,              //是否启用高级公式
        expression: '',                 //高级公式
    },
};
    </pre>
</div>
<div class="myDiv" style="width: 400px">
    请设置option：
    <br>
    <textarea rows="10" cols="40" id="option"></textarea>
    <br>
    <button class="btn btn-success" type="button" onclick="initFilterBox()">$("#myFilterBox").initFilterBox(option)
    </button>
    <br><br>
    <button class="btn btn-success" type="button" onclick="getFilterData()">$("#myFilterBox").getFilterData()</button>
    <br><br>
    <button class="btn btn-success" type="button" onclick="$('#myFilterBox').destoryFilterBox()">
        $("#myFilterBox").destoryFilterBox()
    </button>
    <br><br>
    <button class="btn btn-success" type="button" onclick="restore()">option.data = data;<br>
        $("#myFilterBox").initFilterBox(option);
    </button>
    <br><br>
    <p>data：</p>
    <p id="data"></p>
</div>

<div id="myFilterBox" class="myDiv"></div>
</body>
</html>